{% extends "base.html" %}

{% block title %}编辑开班{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <h2 class="mb-4">编辑开班</h2>
        <form method="POST">
            <div class="mb-3">
                <label for="grade" class="form-label">年级</label>
                <div class="input-group">
                    <select class="form-control" id="grade" name="grade" required>
                        <option value="">请选择年级</option>
                        {% for grade in grades %}
                        <option value="{{ grade.name }}" {% if class_obj.grade == grade.name %}selected{% endif %}>{{ grade.name }}</option>
                        {% endfor %}
                    </select>
                    <a href="{{ url_for('add_grade') }}" class="btn btn-primary" target="_blank">添加年级</a>
                    <button type="button" class="btn btn-secondary" onclick="location.reload()">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                </div>
            </div>
            <div class="mb-3">
                <label for="year" class="form-label">年度</label>
                <div class="input-group">
                    <input type="number" class="form-control" id="year" name="year" required 
                           value="{{ class_obj.year }}" min="1900" max="2100">
                    <button type="button" class="btn btn-outline-secondary" onclick="decreaseYear()">
                        <i class="bi bi-dash"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="increaseYear()">
                        <i class="bi bi-plus"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="showYearPicker()">
                        <i class="bi bi-calendar"></i>
                    </button>
                </div>
            </div>
            <div class="mb-3">
                <label for="semester" class="form-label">学期</label>
                <div class="input-group">
                    <select class="form-control" id="semester" name="semester" required>
                        <option value="">请选择学期</option>
                        {% for semester in semesters %}
                        <option value="{{ semester.name }}" {% if class_obj.semester == semester.name %}selected{% endif %}>{{ semester.name }}</option>
                        {% endfor %}
                    </select>
                    <a href="{{ url_for('add_semester') }}" class="btn btn-primary" target="_blank">添加学期</a>
                    <button type="button" class="btn btn-secondary" onclick="location.reload()">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                </div>
            </div>
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">保存</button>
                <a href="{{ url_for('list_classes') }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>

<!-- 年份选择弹窗 -->
<div class="modal fade" id="yearPickerModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择年份</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <button type="button" class="btn btn-outline-secondary" onclick="changeYearRange(-10)">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <span id="yearRange"></span>
                    <button type="button" class="btn btn-outline-secondary" onclick="changeYearRange(10)">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
                <div id="yearGrid" class="d-grid gap-2" style="grid-template-columns: repeat(5, 1fr);">
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
let yearModal;
let startYear;

// 增加年份
function increaseYear() {
    let yearInput = document.getElementById('year');
    yearInput.value = parseInt(yearInput.value) + 1;
}

// 减少年份
function decreaseYear() {
    let yearInput = document.getElementById('year');
    yearInput.value = parseInt(yearInput.value) - 1;
}

// 初始化年份选择器
function initYearPicker() {
    if (!yearModal) {
        yearModal = new bootstrap.Modal(document.getElementById('yearPickerModal'));
    }
}

// 显示年份选择器
function showYearPicker() {
    initYearPicker();
    const currentYear = parseInt(document.getElementById('year').value) || new Date().getFullYear();
    startYear = Math.floor(currentYear / 10) * 10;
    updateYearGrid();
    yearModal.show();
}

// 更新年份范围
function changeYearRange(delta) {
    startYear += delta;
    updateYearGrid();
}

// 更新年份网格
function updateYearGrid() {
    const yearRangeElement = document.getElementById('yearRange');
    const yearGrid = document.getElementById('yearGrid');
    const endYear = startYear + 9;
    
    yearRangeElement.textContent = `${startYear} - ${endYear}`;
    yearGrid.innerHTML = '';
    
    for (let year = startYear; year <= endYear; year++) {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'btn btn-outline-primary';
        btn.textContent = year;
        btn.onclick = () => selectYear(year);
        yearGrid.appendChild(btn);
    }
}

// 选择年份
function selectYear(year) {
    document.getElementById('year').value = year;
    yearModal.hide();
}
</script>
{% endblock %}
{% endblock %} 